<template>
  <div class="app-container">
    <!--用户数据-->
    <div class="head-container">
      <!--      <div v-if="crud.props.searchToggle">-->
      <!--        <el-input-->
      <!--          v-model="query.name"-->
      <!--          clearable-->
      <!--          size="small"-->
      <!--          placeholder="请输入用户名/姓名"-->
      <!--          style="width: 200px;"-->
      <!--          class="filter-item"-->
      <!--          @keyup.enter.native="crud.toQuery"-->
      <!--        />-->
      <!--        <el-select v-model="query.roleId" size="small" style="width: 180px" class="filter-item" placeholder="请选择角色" clearable>-->
      <!--          <el-option-->
      <!--            v-for="item in roleList"-->
      <!--            :key="item.id"-->
      <!--            :label="item.roleName"-->
      <!--            :value="item.id"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--        <rrOperation :crud="crud" />-->
      <!--      </div>-->
      <crudOperation show="" :permission="permission" />
    </div>
    <!--表单渲染-->
    <el-drawer
      :visible.sync="crud.status.cu > 0"
      :before-close="crud.cancelCU"
      direction="rtl"
      :append-to-body="false"
      custom-class="common-drawer"
      size="450px"
      :show-close="false"
    >
      <div slot="title" class="drawer-title">
        <span>{{ crud.status.title }}</span>
        <span class="el-icon-close" @click="crud.cancelCU" />
      </div>
      <div class="drawer-content">
        <el-scrollbar :native="false" :noresize="false" class="dark fix">
          <el-form
            ref="form"
            :inline="true"
            :model="form"
            :rules="rules"
            size="small"
            label-width="130px"
          >
            <el-form-item label="成员账号" prop="loginName">
              <el-input v-model="form.loginName" />
            </el-form-item>
            <el-form-item label="成员姓名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="所属角色" prop="rolesId">
              <el-select
                v-model="form.rolesId"
                placeholder="请选择角色"
                style="width: 180px"
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <p><small>选择所属角色后默认继承角色权限</small></p>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
              <el-input v-model="form.password" type="password" />
            </el-form-item>
            <el-form-item v-if="!form.id" label="确认密码" prop="passwordRepeat">
              <el-input v-model="form.passwordRepeat" type="password" />
            </el-form-item>
            <el-form-item v-if="form.id" label="新密码" prop="newPassword">
              <el-input v-model="form.newPassword" type="password" />
            </el-form-item>
            <el-form-item label="备注信息">
              <el-input v-model="form.note" type="textarea" />
            </el-form-item>
          </el-form>
        </el-scrollbar>
        <div class="fix-bottom">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >确认</el-button
          >
        </div>
      </div>
    </el-drawer>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column
        v-if="columns.visible('id')"
        :show-overflow-tooltip="true"
        prop="id"
        label="ID"
      />
      <el-table-column
        v-if="columns.visible('loginName')"
        :show-overflow-tooltip="true"
        prop="loginName"
        label="成员账号"
      />
      <!-- <el-table-column
        v-if="columns.visible('nickName')"
        :show-overflow-tooltip="true"
        prop="nickName"
        label="姓名"
      /> -->

      <el-table-column
        v-if="columns.visible('nickName')"
        :show-overflow-tooltip="true"
        prop="nickName"
        label="角色"
      />
      <el-table-column
        v-if="columns.visible('createAt')"
        :show-overflow-tooltip="true"
        prop="createAt"
        label="添加时间"
      />
      <!-- <el-table-column
        v-if="columns.visible('status')"
        label="是否启用"
        align="center"
        prop="state"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="0"
            :inactive-value="1"
            @change="changeEnabled(scope.row)"
          />
        </template>
      </el-table-column> -->
      <el-table-column
        v-permission="['admin', 'user:edit', 'user:del']"
        label="操作"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            :disabled-dle="scope.row.id === user.id"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import crudUser from '@/api/permission/user'
import { isvalidPhone } from '@/utils/validate'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getRoleAllList } from '../../../api/permission'
import rrOperation from '@crud/RR.operation'
import { toDisableAndOpen } from '../../../api/permission/user'

// crud交由presenter持有
const defaultCrud = CRUD({
  title: '成员',
  url: '/admin/manager/getManager',
  crudMethod: { ...crudUser }
})
const defaultForm = {
  loginName: null,
  name: null,
  rolesId: null,
  password: null,
  newPassword: null,
  passwordRepeat: null,
  note: null
}
export default {
  name: 'SystemUser',
  components: { crudOperation, udOperation, pagination, rrOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  // 数据字典
  // dicts: ['user_status'],
  data() {
    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      roleList: [],
      defaultProps: { children: 'children', label: 'name' },
      permission: {
        // add: ['admin', 'user:add'],
        // edit: ['admin', 'user:edit'],
        // del: ['admin', 'user:del']
      },
      rules: {
        loginName: [
          { required: true, message: '请输入成员账号', trigger: 'blur' }
        ],
        // name: [
        //   { required: true, message: '请输入成员姓名', trigger: 'blur' }
        // ],
        rolesId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        password: [
          { required: true, trigger: 'blur', message: '请输入登录密码' }
        ],
        passwordRepeat: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value !== this.crud.form.password) {
                callback(new Error('两次密码输入不一致'))
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      this.getRoleList()
    },
    [CRUD.HOOK.beforeToAdd](crud) {
      this.$set(crud.form, 'id', null)
      this.$set(crud.form, 'createAt', null)
    },

    [CRUD.HOOK.beforeToEdit](crud) {
      this.$set(crud.form, 'newPassword', null)
      this.$set(crud.form, 'createAt', null)
    },
    // 改变状态
    changeEnabled(item) {
      const { status, id, name } = item
      this.$confirm(
        '此操作将 "' +
          { 0: '启用', 1: '禁用' }[status] +
          '" ' +
          name +
          ', 是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          toDisableAndOpen({ id, status }).then((res) => {
            if (res.code == 0) {
              this.$notify({
                title: { 0: '启用成功', 1: '禁用成功' }[status],
                type: 'success',
                duration: 2500
              })
            }
          })
        })
        .catch(() => {
          item.activeStatus = { 0: 1, 1: 0 }[status]
        })
    },
    getRoleList() {
      const params = {
        page: 1,
        size: 10
      }
      getRoleAllList(params).then((res) => {
        if (res.code == 0) {
          this.roleList = res.data.records
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
